import { useState } from 'react';
import { useTheme } from '@/hooks/useTheme';
import { ArrowLeft, Calendar, Clock, Dumbbell, BarChart3, Award, ChevronDown, ChevronUp } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

// 定义五分化训练计划类型
interface FiveDaySplitPlan {
  id: string;
  title: string;
  day: string;
  exercises: Exercise[];
}

// 定义训练动作类型
interface Exercise {
  id: string;
  name: string;
  sets: number;
  reps: number;
}

// 五分化训练数据 - 根据用户提供的表格创建
const fiveDaySplitData: FiveDaySplitPlan[] = [
  {
    id: 'chest',
    title: '胸部训练',
    day: '第一天',
    exercises: [
      { id: 'incline-dumbbell-press', name: '上斜哑铃推举', sets: 3, reps: 12 },
      { id: 'flat-bench-press', name: '平板卧推', sets: 3, reps: 10 },
      { id: 'cable-fly', name: '绳索飞鸟', sets: 3, reps: 15 },
      { id: 'push-ups', name: '俯卧撑', sets: 3, reps: 15 },
      { id: 'cable-tricep-pushdown', name: '绳索下压', sets: 3, reps: 15 }
    ]
  },
  {
    id: 'back',
    title: '背部训练',
    day: '第二天',
    exercises: [
      { id: 'seated-cable-row', name: '坐姿下拉', sets: 3, reps: 12 },
      { id: 'machine-row', name: '器械划船', sets: 3, reps: 10 },
      { id: 'cable-row', name: '绳索划船', sets: 3, reps: 12 },
      { id: 'cable-pulldown', name: '绳索直杆下压', sets: 3, reps: 10 },
      { id: 'dumbbell-curl', name: '哑铃弯举', sets: 3, reps: 12 }
    ]
  },
  {
    id: 'shoulders',
    title: '肩部训练',
    day: '第三天',
    exercises: [
      { id: 'dumbbell-shoulder-press', name: '哑铃肩推', sets: 3, reps: 10 },
      { id: 'lateral-raise', name: '哑铃侧平举', sets: 3, reps: 15 },
      { id: 'cable-lateral-raise', name: '绳索侧平举', sets: 3, reps: 15 },
      { id: 'face-pull', name: '绳索面拉', sets: 3, reps: 10 },
      { id: 'dumbbell-shrug', name: '哑铃耸肩', sets: 3, reps: 10 }
    ]
  },
  {
    id: 'legs',
    title: '腿部训练',
    day: '第四天',
    exercises: [
      { id: 'leg-press', name: '腿举', sets: 3, reps: 12 },
      { id: 'squat', name: '深蹲', sets: 3, reps: 8 },
      { id: 'leg-extension', name: '腿屈伸', sets: 3, reps: 15 },
      { id: 'leg-curl', name: '腿弯举', sets: 3, reps: 15 }
    ]
  },
  {
    id: 'arms',
    title: '手臂训练',
    day: '第五天',
    exercises: [
      { id: 'cable-tricep-extension', name: '绳索臂屈伸', sets: 3, reps: 15 },
      { id: 'cable-bicep-curl', name: '绳索二头弯举', sets: 3, reps: 12 },
      { id: 'cable-tricep-pushdown', name: '绳索下压', sets: 3, reps: 15 },
      { id: 'hammer-curl', name: '垂式弯举', sets: 3, reps: 12 }
    ]
  }
];

// 休息日用数据
const restDays = [
  { id: 'rest1', title: '休息日', day: '第六天' },
  { id: 'rest2', title: '休息日', day: '第七天' }
];

export default function FiveDaySplitTraining() {
  const { theme } = useTheme();
  const [activeDay, setActiveDay] = useState<string>(fiveDaySplitData[0].id);
  const [expandedDays, setExpandedDays] = useState<Record<string, boolean>>({
    'chest': true,
    'back': false,
    'shoulders': false,
    'legs': false,
    'arms': false,
    'rest1': false,
    'rest2': false
  });
  const navigate = useNavigate();
  
  // 切换展开/折叠状态
  const toggleDayExpansion = (dayId: string) => {
    setExpandedDays(prev => ({
      ...prev,
      [dayId]: !prev[dayId]
    }));
    setActiveDay(dayId);
  };
  
  // 渲染所有训练日和休息日
  const allDays = [...fiveDaySplitData, ...restDays];

  return (
    <div className={`min-h-screen flex flex-col ${theme === 'dark' ? 'dark bg-slate-900 text-white' : 'bg-white text-slate-900'}`}>
      {/* 导航栏 */}
      <header className="sticky top-0 z-40 bg-white/90 dark:bg-slate-900/90 backdrop-blur-md shadow-md">
        <div className="container mx-auto px-4 py-4 flex items-center">
          <button 
            onClick={() => navigate(-1)} 
            className="mr-4 p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
          >
            <ArrowLeft size={20} />
          </button>
          <h1 className="text-xl font-bold bg-gradient-to-r from-blue-600 to-orange-500 bg-clip-text text-transparent">
            五分化训练计划
          </h1>
        </div>
      </header>

      <main className="flex-grow">
        {/* 介绍区域 */}
        <section className="py-8 bg-gradient-to-br from-blue-50 via-white to-orange-50 dark:from-blue-900/30 dark:via-slate-900 dark:to-orange-900/30">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-2xl md:text-3xl font-bold mb-4">科学五分化训练方案</h2>
              <p className="text-slate-600 dark:text-slate-300 mb-8">
                专业的五分化训练计划，按胸、背、肩、腿、手臂顺序安排，
                全面发展各部位肌肉群，适合有一定基础的健身爱好者。
              </p>
              
              <div className="flex flex-wrap justify-center gap-3 mb-6">
                <div className="flex items-center bg-white dark:bg-slate-800 px-4 py-2 rounded-full shadow-md">
                  <Calendar size={18} className="mr-2 text-blue-600 dark:text-blue-400" />
                  <span>7天训练周期</span>
                </div>
                <div className="flex items-center bg-white dark:bg-slate-800 px-4 py-2 rounded-full shadow-md">
                  <Dumbbell size={18} className="mr-2 text-blue-600 dark:text-blue-400" />
                  <span>5天训练 + 2天休息</span>
                </div>
                <div className="flex items-center bg-white dark:bg-slate-800 px-4 py-2 rounded-full shadow-md">
                  <BarChart3 size={18} className="mr-2 text-blue-600 dark:text-blue-400" />
                  <span>循序渐进</span>
                </div>
              </div>
            </div>
          </div>
        </section>
        
        {/* 训练计划区域 */}
        <section className="py-10">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              {/* 训练日选择器 */}
              <div className="flex overflow-x-auto pb-4 mb-8 gap-3 md:flex-wrap md:justify-center">
                {allDays.map((day) => (
                  <button
                    key={day.id}
                    onClick={() => toggleDayExpansion(day.id)}
                    className={`px-4 py-2 rounded-full whitespace-nowrap transition-all duration-300 ${
                      activeDay === day.id
                        ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/20'
                        : day.id.includes('rest')
                          ? 'bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300'
                          : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'
                    }`}
                  >
                    {day.day} · {day.title}
                  </button>
                ))}
              </div>
              
              {/* 训练计划表格 */}
              <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-xl overflow-hidden">
                {/* 表格头部 */}
                <div className="grid grid-cols-12 bg-slate-50 dark:bg-slate-700/50 py-4 px-6 font-semibold text-sm">
                  <div className="col-span-8">训练动作</div>
                  <div className="col-span-2 text-center">组数</div>
                  <div className="col-span-2 text-center">次数</div>
                </div>
                
                {/* 表格内容 */}
                <div className="divide-y divide-slate-200 dark:divide-slate-700">
                  {allDays.map((day) => (
                    <div key={day.id} className="overflow-hidden transition-all duration-300">
                      {/* 日标题行 - 可点击展开/折叠 */}
                      <div 
                        className="grid grid-cols-12 py-4 px-6 items-center cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700/30"
                        onClick={() => toggleDayExpansion(day.id)}
                      >
                        <div className="col-span-10 flex items-center font-medium">
                          <div className={`w-8 h-8 rounded-full flex items-center justify-center mr-3 ${
                            day.id.includes('rest') 
                              ? 'bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300' 
                              : 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400'
                          }`}>
                            {day.id.includes('rest') ? (
                              <Clock size={18} />
                            ) : (
                              <Dumbbell size={18} />
                            )}
                          </div>
                          <div>
                            <div className="font-semibold">{day.title}</div>
                            <div className="text-sm text-slate-500 dark:text-slate-400">{day.day}</div>
                          </div>
                        </div>
                        <div className="col-span-2 flex justify-end">
                          {day.id.includes('rest') ? (
                            <span className="text-sm text-slate-500 dark:text-slate-400">休息日</span>
                          ) : expandedDays[day.id] ? (
                            <ChevronUp size={20} />
                          ) : (
                            <ChevronDown size={20} />
                          )}
                        </div>
                      </div>
                      
                      {/* 训练动作行 - 根据展开状态显示/隐藏 */}
                      <div className={`transition-all duration-300 overflow-hidden ${
                        expandedDays[day.id] ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0'
                      }`}>
                        {day.id.includes('rest') ? (
                          <div className="py-8 px-6 text-center text-slate-500 dark:text-slate-400">
                            今日休息，让身体充分恢复，为下一周训练做好准备。
                          </div>
                        ) : (
                          (day as FiveDaySplitPlan).exercises.map((exercise, index) => (
                            <div 
                              key={exercise.id}
                              className={`grid grid-cols-12 py-3 px-6 ${index % 2 === 0 ? 'bg-slate-50/50 dark:bg-slate-700/10' : ''}`}
                            >
                              <div className="col-span-8 flex items-center">
                                <div className="w-6 h-6 rounded-full bg-slate-200 dark:bg-slate-700 flex items-center justify-center mr-3 text-xs">
                                  {index + 1}
                                </div>
                                <span>{exercise.name}</span>
                              </div>
                              <div className="col-span-2 flex items-center justify-center">
                                <span>{exercise.sets}组</span>
                              </div>
                              <div className="col-span-2 flex items-center justify-center">
                                <span>{exercise.reps}次</span>
                              </div>
                            </div>
                          ))
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
              
              {/* 训练建议卡片 */}
              <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-6">
                  <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mb-4">
                    <Award size={24} className="text-blue-600 dark:text-blue-400" />
                  </div>
                  <h3 className="text-lg font-semibold mb-2">训练建议</h3>
                  <ul className="text-sm text-slate-600 dark:text-slate-300 space-y-2">
                    <li>• 每个动作间休息60-90秒</li>
                    <li>• 保持正确姿势比增加重量更重要</li>
                    <li>• 逐渐增加训练重量，实施渐进超负荷</li>
                  </ul>
                </div>
                
                <div className="bg-orange-50 dark:bg-orange-900/20 rounded-xl p-6">
                  <div className="w-12 h-12 rounded-full bg-orange-100 dark:bg-orange-900/50 flex items-center justify-center mb-4">
                    <Clock size={24} className="text-orange-600 dark:text-orange-400" />
                  </div>
                  <h3 className="text-lg font-semibold mb-2">训练频率</h3>
                  <ul className="text-sm text-slate-600 dark:text-slate-300 space-y-2">
                    <li>• 每周重复一次五分化训练</li>
                    <li>• 8周为一个周期，然后调整计划</li>
                    <li>• 保证每晚7-8小时优质睡眠</li>
                  </ul>
                </div>
                
                <div className="bg-green-50 dark:bg-green-900/20 rounded-xl p-6">
                  <div className="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/50 flex items-center justify-center mb-4">
                    <BarChart3 size={24} className="text-green-600 dark:text-green-400" />
                  </div>
                  <h3 className="text-lg font-semibold mb-2">进度追踪</h3>
                  <ul className="text-sm text-slate-600 dark:text-slate-300 space-y-2">
                    <li>• 记录每次训练的重量和感受</li>
                    <li>• 每2周测量一次身体围度</li>
                    <li>• 每4周拍照记录身体变化</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
      
      {/* 页脚 */}
      <footer className="bg-slate-900 text-white py-6">
        <div className="container mx-auto px-4 text-center">
          <p className="text-slate-400 text-sm">
            © {new Date().getFullYear()} FitMaster 五分化训练计划 | 专业健身知识教学平台
          </p>
        </div>
      </footer>
    </div>
  );
}